<script setup lang="ts">
import { getRaffleRecordsApi } from '@/services/raffle'
import { PageSkip } from '@/utils/tools'
import { onLoad } from '@dcloudio/uni-app'
import { computed, ref } from 'vue'

// 选择日期和tab
const date = ref<string>('')

// 切换日期
const bindDateChange = (e: any) => {
  date.value = e.detail.value
  getRecordsList()
}
// 格式化日期
const dateFormat = computed(() => {
  return !date.value ? '全部' : date.value.split('-').join('年') + '月'
})

const dataList = ref<any[]>([])

const getType = computed(() => {
  // <!-- 0失效1正常2已使用3已过期4待开始 -->
  return (item: any) => {
    const obj = dataList.value?.find((i) => i.id === item.id) as any
    return obj.status !== 1 && obj.status !== 4 ? 'guoqi' : obj?.type === 6 ? 'shiwu' : ''
  }
})

function getTypeValue(type: number) {
  return type === 6 ? '实物券' : '优惠券'
}

const qrcode = ref()
function handleFn(item: any) {
  if (item.type !== 6) {
    PageSkip('/pages/eat/eat', 'switchTab')
  } else if (item.type === 6) {
    qrcode.value = item.id
    qrRef.value?.open()
  }
}

const lotteryId = ref()
// 获取记录列表
const getRecordsList = async () => {
  console.log('获取记录列表', date.value, lotteryId.value)
  const res: any = await getRaffleRecordsApi({
    pageSize: 100,
    pageNum: 1,
    lotteryId: lotteryId.value,
    getTime: date.value,
  })
  if (res.code === 200) {
    console.log('date.value', date.value)
    console.log('res?.data.rows', res?.data.rows)
    dataList.value = res?.data.rows || []
    // dataList.value = [{ id: 18, status: 1, type: 6 }]
    console.log(dataList.value)
  }
}

const qrRef = ref()

onLoad((options) => {
  console.log('options', options)
  lotteryId.value = options?.lotteryId
  getRecordsList()
})
</script>
<template>
  <view class="container">
    <picker mode="date" fields="month" class="custom-picker" :value="date" @change="bindDateChange">
      <view class="date">
        <view class="uni-input">{{ dateFormat }}</view>
        <text class="iconfont icon_arrow-left"></text>
      </view>
    </picker>
    <view class="listWrapper" v-if="dataList.length > 0">
      <view class="item" v-for="item in dataList" :key="item.id">
        <view class="left" :class="getType(item)">
          <view v-for="i in getTypeValue(item.type)" :key="i">{{ i }}</view>
        </view>
        <view class="content">
          <view class="name"> {{ item.name }} </view>
          <view v-if="item.status === 1 || item.status === 4" class="time">
            有效期至{{ item.validityTime }}
          </view>
          <view class="time2">获得时间：{{ item.acquireTime }}</view>
        </view>
        <view class="right">
          <!-- 0失效1正常2已使用3已过期4待开始 -->
          <view
            v-if="item.status === 1 || item.status === 4"
            class="button"
            :class="getType(item)"
            @click="handleFn(item)"
            >{{ item.type === 6 ? '去核销' : '去使用' }}</view
          >
        </view>
        <image
          src=""
          class="line"
        />
        <!-- 已过期 -->
        <image v-if="item.status === 3" src="../../static/images/watermark.png" class="status" />
        <!-- 已失效 -->
        <image v-if="item.status === 0" src="../../static/images/failure.png" class="status" />
        <!-- 已使用 优惠券 -->
        <image
          v-if="item.status === 2 && item.type !== 6"
          src="../../static/images/yishiyong.png"
          class="status"
        />
        <!-- 已核销实物券 -->
        <image
          v-if="item.status === 2 && item.type === 6"
          src="../../static/images/yihexiao.png"
          class="status"
        />
      </view>
    </view>
    <view v-else>
      <view class="noData">
        <image
          src="https://yuefanpai.oss-cn-hangzhou.aliyuncs.com/nolist.png"
        />
      </view>
    </view>
    <BjsQrCodePopup ref="qrRef" :qrcodeUrl="qrcode" @refresh="getRecordsList" />
  </view>
</template>

<style lang="scss" scoped>
.container {
  padding: 32rpx 24rpx 0;
  height: 100vh;
  background: #f5f5f5;
  .date {
    display: flex;
    align-items: center;
    padding: 0 0 28rpx 40rpx;
    .iconfont {
      margin-left: 10rpx;
      font-weight: bold;
      font-size: 24rpx;
    }
    color: rgba(0, 0, 0, 0.9);
    font-family: 'PingFang SC';
    font-size: 32rpx;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
  .listWrapper {
    height: calc(100vh - 186rpx);
    padding-bottom: 100rpx;
    border-radius: 16rpx;
    overflow-y: auto;
    .item {
      margin-bottom: 28rpx;
      width: 702rpx;
      height: 212rpx;
      border-radius: 16rpx;
      padding-right: 32rpx;
      background-color: #fff;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left {
        border-radius: 16rpx 0px 0px 16rpx;
        padding: 30rpx 0;
        background: #8adf4b;
        width: 58rpx;
        height: 212rpx;
        color: #fff;
        font-family: 'PingFang SC';
        font-size: 30rpx;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
      }
      .content {
        width: 412rpx;
        height: 212rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 28rpx 0;
        .name {
          color: #000;
          font-family: 'PingFang SC';
          font-size: 30rpx;
          font-style: normal;
          font-weight: 400;
          margin-bottom: 20rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .time {
          margin-bottom: 14rpx;
          border-radius: 4px;
          background: #eafbdd;
          height: 36rpx;
          width: 290rpx;
          line-height: 36rpx;
          text-align: center;
          color: rgba(0, 0, 0, 0.5);
          font-family: 'PingFang SC';
          font-size: 20rpx;
          font-weight: 400;
        }
        .time2 {
          height: 36rpx;
          width: 100%;
          line-height: 36rpx;
          text-align: left;
          color: rgba(0, 0, 0, 0.5);
          font-family: 'PingFang SC';
          font-size: 20rpx;
          font-weight: 400;
        }
      }
      .line {
        position: absolute;
        top: -12rpx;
        width: 12px;
        height: 236rpx;
        right: 188rpx;
      }
      .right {
        width: 128rpx;
      }
      .button {
        text-align: center;
        line-height: 54rpx;
        width: 128rpx;
        height: 54rpx;
        color: #fff;
        font-family: 'PingFang SC';
        font-size: 24rpx;
        font-style: normal;
        font-weight: 400;
        border-radius: 40rpx;
        background: #8adf4b;
      }
      .status {
        position: absolute;
        width: 120rpx;
        height: 120rpx;
        right: 40rpx;
        top: 48rpx;
      }
      .shiwu {
        background: #ffb52c;
      }
      .guoqi {
        background: #c2c3c6;
      }
    }
  }
  .noData {
    width: 376rpx;
    height: 334rpx;
    margin: 320rpx auto 0;
  }
}
</style>
